<template>
	<view class="content">
		<!--  -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item1,index1) in detailList.pics" :key="item1.pics_id" @click="showImage(index1)">
				<view class="swiper-item">
					<image :src="item1.pics_mid" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<!--  -->
		<view class="good_price">
			￥{{detailList.goods_price}}
		</view>
		<view class="good_group">
			<view class="good_name">
				{{detailList.goods_name}}
			</view>
			<view class="good_collect" @click="collect(detailList.goods_id)">
				<image :src="isCollect?yesurl:nourl" mode="widthFix"></image>
				<text>收藏</text>
			</view>
		</view>
		<!-- 详情 -->
		<view class="info">
			<view class="info_title">
			    图文详情
			</view>
			<view class="info_detail">
				<rich-text :nodes="detailList.goods_introduce"></rich-text>
			</view>
		</view>
		<!-- 底部导航 -->
		<view class="tool">
			<view class="tool_kefu">
				<image src="/static/detail/kefu.png" mode="widthFix"></image>
				<text>联系客服</text>
				<button open-type="contact"></button>
			</view>
			<view class="tool_kefu">
				<image src="/static/detail/share.png" mode="widthFix"></image>
				<text>分享</text>
				<button open-type="share"></button>
			</view>
			<navigator url="../cart/cart" open-type="switchTab" class="tool_kefu">
				<image src="/static/cart.png" mode="widthFix"></image>
				<text>购物车</text>
			</navigator>
			<view class="tool_cart" @click="addCart">
				加入购物车
			</view>
			<view class="tool_buy" @click="handPay">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods_id:'',
				detailList:[],
				yesurl:'/static/detail/select1.png',
				nourl:'/static/detail/select.png',
				isCollect:false
			}
		},
		goodInfo:{},
		onLoad(res) {
			this.goods_id=res.goods_id
			console.log(res.goods_id)
			this.getdata()
		},
		methods: {
		    async getdata(){
				const res=await this.$myRequest({
					url:'/api/public/v1/goods/detail?goods_id='+this.goods_id
				})
				this.goodInfo=res.data.message
				// 获取缓存
				let collect=uni.getStorageSync('collect')||[]
				let isCollect=collect.some(v=>v.goods_id===this.goodInfo.goods_id)
				this.isCollect=isCollect
				// 对数据的优化,减少数据压力
				this.detailList={
					goods_name:res.data.message.goods_name,
					goods_price:res.data.message.goods_price,
					goods_introduce:res.data.message.goods_introduce,
					pics:res.data.message.pics
				}
				console.log(this.detailList)
			},
			showImage(res){
				// 获取数据
				const url=this.goodInfo.pics.map(v=>v.pics_mid)
				uni.previewImage({
					// 图片的当前地址
					current:url[res],
					urls:url
				})
			},
			addCart(){
				console.log("你好")
				//获取缓存数据
				let cart=uni.getStorageSync('cart')||[];
				// 判断师傅存在数组中
				let index=cart.findIndex(v=>v.goods_id===this.goodInfo.goods_id)
				if(index===-1){
					// 不存在第一次添加
					this.goodInfo.num=1;
					// 购物车转态
					this.goodInfo.isCheck=true
					cart.push(this.goodInfo);
				}else{
					cart[index].num++;
				}
				// 把数据添加到缓存中
				uni.setStorageSync("cart",cart);
				uni.showToast({
					icon:'none',
					title:"加入购物车",
					mask:true
				})
			},
			collect(){
                 

				let collect=wx.getStorageSync('collect')||[]
				let index=collect.findIndex(v=>v.goods_id===this.goodInfo.goods_id)
				if(index!=-1){
					collect.splice(index,1)
					uni.showToast({
						icon:'none',
						title:'取消收藏'
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'收藏成功'
					})
					collect.push(this.goodInfo)
				}
				this.isCollect=!this.isCollect
				uni.setStorageSync('collect',collect)
			},
			handPay(){
				//生成n位数字字符串
				  var res = "";
				  for(var i=0;i<10;i++){
				   res += Math.floor(Math.random()*10);
				   }
					// 拿到数据
					let info=uni.getStorageSync('payShop')||[]
					this.detailList.id=res
					info.push(this.detailList)
					uni.setStorageSync('payShop',info)
					uni.showToast({
						icon:'success',
						title:'支付成功',
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/order/order?page=1'
						})
					},1000)
			}
			
		}
	}
</script>

<style lang="scss">
  .content{
	  swiper{
		  height: 80vw;
		  text-align: center;
	  }
	  image{
		  width: 100%;
	  }
  }
  // 
  .good_price{
	  margin-top: 5rpx;
	  padding-left: 20rpx;
	  color: $shop-color;
	  font-size: 40rpx;
	  font-weight: bold;
	  width: 100%;
  }
  .good_group{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  border-bottom: 5px solid gainsboro;
	  .good_name{
		  display: -webkit-box;
		  overflow: hidden;
		  -webkit-box-orient:vertical;
		  -webkit-line-clamp:2;
		  flex: 4;
		  padding: 5rpx 20rpx;
		  border-right: 3rpx solid black;
	  }
	  .good_collect{
		  flex: 1;
		  display: flex;
		  flex-direction: column;
		  justify-content: space-between;
		  align-items: center;
		  image{
			 
			  width: 40%;
		  }
	  }
  }
  // 
  .info{
  		  .info_title{
  			  color: $shop-color;
  			  height: 80rpx;
  			  line-height: 80rpx;
  			  padding: 0rpx 20rpx;
  			  font-size: 35rpx;
			  font-weight: bold;
  			  border-bottom: 10rpx solid gainsboro;
  		  }
  }
  // tool
  .tool{
	  
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  display: flex;
	  height: 90rpx;
	  border-top: 1rpx solid gainsboro;
	  background-color: white;
	  .tool_kefu{
		  flex: 1;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  position: relative;
		  image{
			  width: 50%;
		  }
		  font-size: 20rpx;
		  color: gray;
		  button{
			  position: absolute;
			  left: 0;
			  bottom: 0;
			  width: 100%;
			  height: 100%;
			  opacity: 0;
		  }
	  }
	  .tool_cart{
		  background-color: chocolate;
		  text-align: center;
		  line-height: 90rpx;
		  font-size: 32rpx;
		  color: white;
		  flex: 2;
	  }
	  .tool_buy{
		  background-color: red;
		  text-align: center;
		  line-height: 100rpx;
		  font-size: 32rpx;
		  color: white;
		  flex: 2;
	  }
  }
</style>
